<template>
    <div id="index">
        <header>
            <div class="left">
                <h1>DAKAR物联网能耗管理平台</h1>
                <small>DAKAR Things Energy Management Platform</small>
            </div>
            <ul>
                <li :class="{active:!i}" v-for="(x,i) in nav" @click="linkTo(x.url)">
                    <i :class="x.icon"></i>
                    <p>{{x.name}}</p>
                </li>
            </ul>
            <div class="right">
                欢迎你！管理员
                <a href="javascript:void(0)">
                    <i class="ri-question-line"></i>
                    帮助
                </a>
                <a href="javascript:void(0)" @click="logout">
                    <i class="ri-shut-down-line"></i>
                    退出
                </a>
            </div>
        </header>
        <main>
            <aside :class="{hide:hide}">
                <div class="search">
                    <div class="title">
                        <span>高级查询</span>
                        <i :class="hide?'el-icon-d-arrow-right':'el-icon-d-arrow-left'" @click="hide=!hide"></i>
                    </div>
                    <el-input placeholder="请输入内容" v-model="keyword">
                        <el-button slot="append" icon="el-icon-search" @click="search">查询</el-button>
                    </el-input>
                </div>
                <el-tree ref="tree" :default-expanded-keys="open_key" :props="{children: 'childrens',label: 'name'}" highlight-current :data="data" node-key="id" expand-on-click-node @node-click="clickTree">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <img :src="data.level==4?house:sitemap" alt=""><span>{{ data.name }}</span>
                    </span>
                </el-tree>
            </aside>
            <section>
                <keep-alive>
                    <router-view class="child-pages" v-if="$route.meta.keepAlive"/>
                </keep-alive>
                <router-view class="child-pages" v-if="!$route.meta.keepAlive"/>
            </section>
        </main>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        data() {
            return {
                nav:TOP_NAV,
                house:require('../assets/image/house.png'),
                sitemap:require('../assets/image/sitemap.png'),
                hide:false,
                keyword:'',
                data: [],
                open_key:[],
                tree:[],
            };
        },
        mounted() {
            let load=this.$loading({lock:true});
            this.$axios.map.tree_list().then(v=>{
                load.close();
                if(v.code=='200'){
                    this.data=this.tree=v.data;
                    this.$store.commit('setTree',v.data[0]);
                    this.open_key.push(v.data[0].id)
                }
            })
        },
        methods: {
            search(){
                if(!this.keyword) this.data=this.tree;
                else{
                    let arr=[];
                    let tree=item=>{
                        for(let x of item){
                            if(x.name.indexOf(this.keyword)>-1) arr.push(x);
                            if(x.childrens.length>0) tree(x.childrens);
                        }
                    };
                    tree(this.tree);
                    this.data=arr;
                }
            },
            linkTo(url){
                if(url.indexOf('http')>-1) window.open(url);
                else this.$router.push(url)
            },
            clickTree(data) {
                if(!window.navigator.onLine || data.lng==0 || data.lat==0){
                    let flag=data.level==4?'detail':'statistics';
                    this.$router.push(`/index/${flag}/${data.id}`);
                    this.$store.commit('setTree',data);
                }else{
                    if(this.$route.path!='/index'){
                        this.$router.push('/index');
                        setTimeout(e=>{
                            this.$store.commit('setTree',data);
                        },500);
                    }else{
                        this.$store.commit('setTree',data);
                    }
                }
            },
            logout(){
                this.$confirm('是否确认退出登录？','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(v=>{
                    localStorage.removeItem('token');
                    this.$router.push('/')
                });
            }
        },
        watch:{
            '$store.state.tree'(data){
                if(!data) return ;
                this.open_key=[data.id];
                this.$nextTick(() => {
                    this.$refs.tree.setCurrentKey(data.id);
                });
            }
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    #index {
        &>header {
            height: 90px;
            background: linear-gradient(to bottom, #0CB4FA, #0196D6);
            color: #fff;
            box-shadow: 0 1px 4px rgba(1, 150, 214, .5);
            position: relative;
            z-index: 2;

            .left {
                height: 100%;
                float: left;
                width: 420px;
                letter-spacing: 1px;
                padding: 23px 0 0 25px;
                text-shadow: 0 2px 3px rgba(0, 0, 0, .4);

                h1 {
                    font-size: 28px;
                    margin: 0 0 3px;
                }

                small {
                    font-size: 14px;
                    letter-spacing: 2px;
                }
            }

            ul {
                width: calc(~'100% - 700px');
                float: left;
                overflow: hidden;
                overflow-x: auto;
                height: 100%;
                position: relative;
                font-size: 0;
                white-space: nowrap;

                .border {
                    content: '';
                    display: block;
                    height: 100%;
                    width: 1px;
                    position: absolute;
                    top: 0;
                    z-index: 2;
                    background: linear-gradient(to bottom, transparent, #fff);
                }

                &:before {
                    .border;
                    left: 0;
                }

                li {
                    font-size: 15px;
                    cursor: pointer;
                    display: inline-block;
                    width: 100px;
                    height: 100%;
                    text-align: center;
                    position: relative;
                    color: rgba(255, 255, 255, .7);

                    &:hover, &.active {
                        background: linear-gradient(to bottom, transparent, #47C0EE);
                        color: #fff;
                    }

                    &:after {
                        .border;
                        right: 0
                    }

                    i {
                        display: inline-block;
                        font-size: 30px;
                        margin: 20px 0 8px;
                    }
                }
            }

            .right {
                float: right;
                padding: 55px 25px 0 0;
                width: 280px;
                text-align: right;
                line-height: 22px;
                font-size: 14px;

                a {
                    display: inline-block;
                    margin: 0 0 0 10px;

                    i {
                        font-size: 22px;
                        vertical-align: bottom;
                    }
                }
            }
        }

        &>main {
            height: calc(~'100% - 90px');
            overflow: hidden;

            &>aside {
                height: 100%;
                overflow: hidden;
                width: 300px;
                background: #fff;
                float: left;
                border-right: 1px solid #95b8e7;
                transition: all .2s ease-in-out;
                .search{
                    border-bottom: 1px dotted #95b8e7;
                    .title{
                        white-space: nowrap;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        height: 48px;
                        padding: 0 10px 0 15px;
                        border-bottom: 2px solid #fea600;
                        background: linear-gradient(to bottom,#fff,#EDEAF0);
                        i{
                            color: #249ae8;
                            font-weight: bold;
                            font-size: 18px;
                            padding: 5px;
                            cursor: pointer;
                        }
                    }
                    .el-input{
                        padding: 15px;
                        .el-input-group__append{
                            background: #ff6600;
                            color: #fff;
                            border-color: #d95700;
                        }
                    }
                }

                .el-tree{
                    height: calc(~'100% - 120px');
                    overflow: auto;
                    padding:15px;
                    .el-tree-node.is-current>.el-tree-node__content{
                        background: #ffe48d;
                    }
                    .custom-tree-node {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        font-size: 14px;
                        padding-right: 8px;
                        img{
                            width: 15px;
                            margin: 0 5px 0 0;
                        }
                    }
                }
                &.hide{
                    width:55px;
                    .title span{
                        display: none;
                    }
                    .el-input{
                        display: none;
                    }
                    .el-tree{
                        display: none;
                    }
                    &+section{
                        width: calc(~'100% - 55px')
                    }
                }
            }

            &>section {
                width: calc(~'100% - 300px');
                transition: all .2s ease-in-out;
                height: 100%;
                float: right;
                .child-pages{
                    height: 100%;
                    overflow: auto;
                }
                .btn{
                    height: 35px;
                    line-height: 35px;
                    width: 70px;
                    border-radius: 18px;
                    border: 1px solid #aaa;
                    font-size: 12px;
                    margin: 0 0 0 15px;
                    background: linear-gradient(to bottom,#fff,#ededed 83%,#fff);
                    box-shadow: 0 0 4px rgba(0,0,0,.1);
                    cursor: pointer;
                    i{
                        vertical-align: middle;
                        font-weight: bold;
                        margin: 0 5px 0 0;
                        font-size: 16px;
                        color: #17A9EE;
                    }
                    &.active{
                        border-color: #F35E11;
                        background:linear-gradient(to bottom,#F5680C,#FAA42B 50%) ;
                        font-weight: bold;
                        color: #fff;
                        box-shadow: 0 0 8px #F5680C inset;
                    }
                }
            }
        }

        .icon{
            background: url(../assets/image/icon.png)no-repeat left center/auto 100%;
            mix-blend-mode: multiply;
            &.air-conditioner{
                background-position-x:18%;
            }
            &.all-energy{
                background-position-x:9%;
            }
            &.year-energy{
                background-position-x:36%;
            }
            &.month-energy{
                background-position-x:45%;
            }
            &.warning{
                background-position-x:100%;
            }
            &.all-energy{
                background-position-x:9%;
            }
        }
    }
</style>
